<template>
  <view class="forms">
    <u--form labelPosition="left" :model="form" ref="formList" labelWidth="120" class="formINFOs" v-if="show != 1">
      <u-form-item label="个人防护用品" borderBottom @click="show=1">
        <u--input v-model="form.grfhs" placeholder="个人防护用品" disabled disabledColor="#ffffff" border="none">
        </u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <view class="textears">
        <u-checkbox-group v-model="form.grfh" placement="column" :labelSize='32'>
          <u-checkbox activeColor="#53c21d" v-for="(item,index) in form.grfh" :label="item.label"
                      :name="item.value" shape="circle" :key="index" style="padding: 10px 20px" :checked=true>
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </u--form>
<!--    <hazardousFactors v-if="show" @option="options" :pageCheck="pageCheck"></hazardousFactors>-->
    		<protection @option11="options2" v-if="show === 1" :pageCheck="pageCheck" ref="grfy"></protection>
    <!--		<Safe  @option="options3" :pageCheck="pageCheck"></Safe>-->
    <view class="btn">
      <u-button type="primary" text="上一步" style="margin: 0 10px" @click="superior"></u-button>
      <u-button type="primary" text="确 定" style="margin: 0 10px" @click="nextStep"></u-button>
    </view>
  </view>
</template>

<script>
import hazardousFactors from '../hazardousFactors/hazardousFactors.vue'
import protection from '../protection/protection.vue'
import Safe from '../safetyMeasures/safetyMeasures.vue'
export default {
  components: {
    hazardousFactors,
    protection,
    Safe
  },
  props: ['pageCheck'],
  data() {
    return {
      show: false,
      formModel: {
        name: "",
        userPicker: "",
        datetime: "",
        picker: "",
      },
      list: null,
      form: {
        grfhs: '',
        grfh: []
      }
    }
  },
  methods: {
    options2(val) {
      this.show = null
      this.form.grfh = val
    },
    superior(){
      uni.navigateTo({
        url:`/pages/operationTicket/HotWork/HotWork`
      })
    },
    nextStep(){
      if (this.pageCheck === 2 ){
        this.$refs.grfy && this.$refs.grfy.toHotWork()
      }
      this.show = false
      this.$emit("grfhSubmit", {step: this.$refs.grfy ?  2:3,value:this.form.grfh})
    },
  }
}
</script>

<style lang="scss" scoped>
.forms {
  .formINFOs {
    background: #FFF;
    display: flex;
    height: 85vh;
    padding: 0 !important;
    flex-direction: column;

    .textears {
      flex: 1;
      background: #f6f6f6;
      margin-bottom: 30px;
      border-radius: 8px;
      //height:70vh;
      overflow-y: auto
    }
  }

  .btn {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
